<template>
	<div>
		<view class="v1"><img src="../../static/b_03.gif" alt=""></view>
		<view class="mes">
			<view class="right">
				<!-- <img src="../../static/b_07.gif" alt=""><p class="p1">原产地直采 品牌直买</p> -->
				<p class="p2">崂山矿泉水崂山矿泉水崂山矿泉水崂山矿泉水崂山矿泉水</p>
				<p class="p3">富含矿物质，富含矿物质</p>
				<p class="p4">￥18</p>
				<!-- <span class="span1">单件￥20</span> -->
				<P class="p5">自营</P>
				<span class="span2">30000条评价 97.8%好评</span>
			</view>
		</view>
		<view class="line"></view>
		<view class="v2">
			<navigator url="tuwenxiangqing" hover-class="navigator-hover"><a href=""><button class="btn1">图文详情</button></a></navigator>
			<navigator url="xiangqing" hover-class="navigator-hover"><a href=""><button class="btn2">评价</button></a></navigator>
			<a href=""><button class="btn3">规格参数</button></a>
		</view>
		
		
		<view class="v5">
			 <view class="grace-bg-white grace-common-mt grace-padding grace-common-border">
				<view class="grace-form">
					<view class="grace-items">
		                <graceNumberBox :value="1"></graceNumberBox>
		            </view>
				</view>
			 </view>
			<p class="p2">￥20</p>
			<navigator url="dingdanqueren" hover-class="navigator-hover"><button class="btn6">立即购买</button></navigator>
		</view>
		
		<view class="table">
			<view class="tr">
				<view class="td td1">储存方法</view>
				<view class="td">请置于阴凉干燥处，不宜冷冻</view>
			</view>
			<view class="tr">
				<view class="td td1">保质期</view>
				<view class="td">24个月</view>
			</view>
			<view class="tr">
				<view class="td td1">类别</view>
				<view class="td">矿泉水</view>
			</view>
			<view class="tr">
				<view class="td td1">国别</view>
				<view class="td">中国大陆</view>
			</view>
			<view class="tr">
				<view class="td td1">生产许可证</view>
				<view class="td">SC10637021200209</view>
			</view>
			<view class="tr">
				<view class="td td1">净含量(ml)</view>
				<view class="td">5L*2</view>
			</view>
		</view>
		<view class="space"></view>
	</div>
</template>

<script>
	import graceNumberBox from "../../static/graceUI/components/graceNumberBox.vue";
	export default {
	    data() {
	        return {
	            
	        };
	    },
		onUnload: function () {
										wx.reLaunch({
										  url: 'shop'
										})
									  },
	    methods:{
	        change : function(data){
	            console.log(data);
	            uni.showToast({
	                title:"值 : "+data[0] + " index : "+data[1],
	                icon:"none"
	            })
	        }
	    },
	    components:{
	        graceNumberBox
	    }
	}
</script>

<style>	
	*{
			box-sizing: border-box;
			}
	.v1{
		margin-left: 1.25rem;
		display: flex;
	}
	.v1 img{
		/* left: 2.38rem;
		top: 5.94rem; */
		width: 20.56rem;
		height: 20.75rem;
		margin-top:1.88rem;
		border-radius: 0.31rem;
		margin:auto;
	
	}
	.mes{
		margin-left: 0.85rem;
		margin-top:0.63rem;
	}
	
	.mes .right{
		/* float: right; */
		/* border-bottom:1px solid #eee; */
	}
	
	.mes .right img{
		display: block;
		left: 8.88rem;
		top: 8rem;
		width: 0.96rem;
		height: 0.75rem;
		/* margin-top:40px; */
	
	}
	.mes .right .p1{
		margin-top: -0.81rem;
		margin-left: 0.96rem;
		left: 3.06rem;
		top: 28.13rem;
		/* width: 4.81rem; */
		height: 1.19rem;
		line-height: 1.06rem;
		color: rgba(187, 187, 187, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
		
	}
	.mes .right .p2{
	
		width: 18.88rem;
		height: 2.81rem;
		line-height: 1.38rem;
		color: rgba(16, 16, 16, 1);
		margin:auto;
		font-size: 0.9rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p3{
		left: 1.44rem;
		top: 33.38rem;
		/* width: 7.56rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p4{
	    left: 8.75rem;
		top: 12.69rem;
		/* width: 3.31rem; */
		height: 1.63rem;
		line-height: 1.63rem;
		color: rgba(59, 156, 219, 1);
		font-size: 1.1rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	}
	.mes .right .span1{
		left: 11.56rem;
		top: 9.81rem;
		/* width: 3.5rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.71rem;
		text-align: left;
		font-family: PingFangSC-regular;
		border-left: 1px soild #eee;
		float:left;
		margin-top:-1.25rem;
		margin-left:2.81rem;
		
	}
	.mes .right .p5{
		left: 0.64rem;
		top: 14.37rem;
		width: 1.68rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(59, 156, 219, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		border:1px solid #3B9CDB;
	
	}
	.mes .right .span2{
		left: 11.31rem;
		top: 14.38rem;
		width: 9.44rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:-0.94rem;
		margin-left: 2.35rem;
		float: left;
	}
	.v2{
		display: flex;
	}
	
	.line{
		width: 100%;
		height: 0.31rem;
		background-color: #F0F0F0;
		margin-top:0.63rem;
		
	}
	.btn1,.btn2,.btn3{
		width: 5.63rem;
		height: 2.13rem;
		line-height: 2.13rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.75rem;
		/* float: left; */
		/* justify-content: space-around; */
		border:rgb(187, 187, 187) 1px solid;	
		margin-top:1.68rem;
		margin-left:0.75rem;
		border:none;
		
	}
	.btn1{
		/* margin-left: 1.06rem; */
		
	}
	.btn2{
		/* margin-left: 0.62rem; */
		
	}
	.btn3{
		/* margin-left: 0.62rem; */
		background-color: #3B9CDB;
		color: #fff;
	}
	/* a:active{
		margin-left: 0.62rem;
		background-color: #3B9CDB;
		color: #fff;
	} */
	.v3 .img1{
		left: 0.88rem;
		top: 27.65rem;
		width: 4.38rem;
		height: 4.38rem;
		margin-top:1.38rem;
		margin-left:0.88rem;
	}
	.v3 .shouji{
		left: 5.06rem;
		top: 27.81rem;
		width: 4.75rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float:right;
		margin-right:13rem;
		margin-top:2.06rem;
	}
	.v3 .date{
		left: 11.25rem;
		top: 54.25rem;
		width: 4.63rem;
		height: 1.06rem;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: right;
		margin-right: 7.56rem;
		margin-top:-3.94rem;
	}
	.v3 .xing .img2{
		left: 21.5rem;
		top: 52.81rem;
		width: 0.94rem;
		height: 0.94rem;
		background-color: rgba(255, 198, 24, 1);
		float:right;
		margin-right:1rem ;
		margin-top:4.06rempx;
	
	}
	.v3 .img3{
		left: 4.88rem;
		top: 46.88rem;
		width: 1.25rem;
		height: 1.25rem;
		background-color: rgba(59, 156, 219, 1);
		display: block;
		margin-top:-1.88rem;
		margin-left:5.5rem;
		/* float: right; */
	
	}
	.v3 .water{
		left: 6.38rem;
		top: 46.81rem;
		width: 5.25rem;
		height: 1.25rem;
		color: rgba(59, 156, 219, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 7.56rem;
		margin-top:-1.32rem;
	
	}
	.v3 .text{
		left: 0.9rem;
		top: 64.06rem;
		width: 10.5rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:0.75rem;
		margin-left: 0.94rem;
	}
	.v4{
		width: 100%;
		height: 0.125rem;
		background-color:#F0F0F0;
		margin-top:0.81rem;
	}
	.v5{
		width: 100%;
		height: 3rem;
		bottom:0;
		margin-top:0.625rem;
		background-color: #fefefe;
		position: fixed;
		/* z-index:999; */
	}
	.v5 .btn4{
		width: 2.19rem;
		height: 1.87rem;
		float: left;
		background-color: #fefefe;
		border:none;
		border:1px solid #999999;
		border-radius: none;
		margin-left: 0.625rem;
		border-radius: 20% 0 0 20% ;
		margin-top:0.625rem;
		
	}
	.v5 .btn4 p{
		text-align: center;
		line-height: 1.88rem;
	
	}
	.v5 .span1{
		width: 2.19rem;
		height: 1.88rem;
		
	}
	.v5 .btn5{
		width: 2.19rem;
		height: 1.88rem;
		text-align: center;
		float: left;
		
		background-color: #fefefe;
		/* border:none; */
		border-right: none;
		border:1px solid #999999;
		border-radius:0 20% 20% 0;
		margin-top:0.625rem;
		
		
	}	
	.v5 .btn5 p{
		text-align: center;
		line-height: 1.88rem;
		
	}
	.v5 .p1{
		width: 2.19rem;
		height: 1.88rem;
		float: left;
		text-align: center;
		border-top:1px solid #999999;
		border-bottom:1px solid #999999;
		margin-top:0.625rem;
	}
	.v5 .btn6{
		margin-top: -5rem;
		width: 8.13rem;
		height: 3rem;
		background-color: #ff5000;
		line-height: 3rem;
		float: right;
		color: #FFFFFF;
		border-left: none;
		border:1px solid #999999;
		
		
	}
	.grace-form{
		border:none;
		margin-top:-1rem;
	}
	.v5 .p2{
		font-size: 16px;
		color: #fd0000;
		margin-top:0.625rem;
		margin-left:12.5rem;
	}
	/* .v5 .add{
		width: 105px;
		height: 37px;
	} */
	/* 表格 */
	.table{
        width: 95%;
		height: 15.75rem;
		border:1px solid #eaeaea;
		margin-top:2.5rem;
		margin-left: 0.5rem;
		float:left;
	   
	}
	.table .tr {
		display: flex;
		width: 100%;
		border-bottom:1px solid #eaeaea;
		 text-align: center;
		 line-height: 2.5rem;
		
		
	}
	.table .tr .td{
		font-size: 12px;
		color: #858585;
		justify-content: center;
        text-align: center;
		line-height: 2.5rem;
	}
	.table .tr .td1{
		width: 6.25rem;
		height: 2.5rem;
		border-right: 1px solid #eaeaea;
		
	}
	.space{
		width: 100%;
		height: 5rem;
		background-color: #FFFFFF;
	}
	
</style>
